/*
 * @Description: 签到
 * @Author: iamsmiling
 * @Date: 2021-05-26 21:41:03
 * @LastEditTime: 2021-06-15 10:29:36
 */

import 'dart:ui';

import 'package:credit_business_circle/R/R.dart';
import 'package:credit_business_circle/common_kit/color_kit.dart';
import 'package:credit_business_circle/domain/local/clock/clock_day_entity.dart';
import 'package:credit_business_circle/domain/remote/task/user_task_entity.dart';
import 'package:credit_business_circle/pages/mine/children/clock/clock_controller.dart';
import 'package:credit_business_circle/routes/app_routes.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ClockPage extends GetView<ClockController> {
  const ClockPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: [
          SliverAppBar(
            expandedHeight: R.dimen.dp70,
            iconTheme: IconThemeData(color: R.color.ffffffff),
            title: Text(
              "福利中心",
              style: TextStyle(color: R.color.ffffffff),
            ),
            pinned: true,
            flexibleSpace: Image.asset(
              R.image.calenderBg,
              fit: BoxFit.fill,
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              clipBehavior: Clip.none,
              padding: EdgeInsets.only(top: R.dimen.dp28),
              // transform: Matrix4.translationValues(0, R.dimen.dp20, 0),
              child: Stack(
                // clipBehavior: Clip.none,
                alignment: AlignmentDirectional.topCenter,
                children: [
                  Container(
                    transform: Matrix4.translationValues(0, -R.dimen.dp28, 0),
                    child: Image.asset(
                      R.image.calenderBg,
                      fit: BoxFit.fill,
                      height: R.dimen.dp116,
                      width: R.dimen.width,
                      colorBlendMode: BlendMode.multiply,
                    ),
                  ),
                  Container(
                    transform: Matrix4.translationValues(0, -R.dimen.dp16, 0),
                    width: R.dimen.width - R.dimen.dp13 * 2,
                    alignment: Alignment.center,
                    padding: EdgeInsets.only(
                        top: R.dimen.dp56, bottom: R.dimen.dp18),
                    margin: EdgeInsets.only(
                      left: R.dimen.dp13,
                      right: R.dimen.dp13,
                    ),
                    decoration: BoxDecoration(
                        color: R.color.ffffffff,
                        borderRadius: BorderRadius.circular(R.dimen.sp10)),
                    child: Column(
                      children: [
                        GridView(
                          physics: NeverScrollableScrollPhysics(),
                          padding:
                              EdgeInsets.symmetric(horizontal: R.dimen.dp13),
                          shrinkWrap: true,
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 6,
                                  crossAxisSpacing: R.dimen.dp8,
                                  childAspectRatio: 47 / 71,
                                  mainAxisSpacing: R.dimen.dp8),
                          children: [
                            for (ClockDayEntity item in controller.days)
                              Container(
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: item.bgColor,
                                    gradient: item.linearGradient,
                                    borderRadius:
                                        BorderRadius.circular(R.dimen.sp4)),
                                child: Column(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Container(
                                      margin:
                                          EdgeInsets.only(top: R.dimen.dp16),
                                      alignment: Alignment.center,
                                      width: R.dimen.dp28,
                                      height: R.dimen.dp28,
                                      decoration: BoxDecoration(
                                          color: item.dateBgColor,
                                          borderRadius: BorderRadius.circular(
                                              R.dimen.dp28 / 2)),
                                      child: Text(
                                        item.date,
                                        style: TextStyle(
                                            color: item.dateColor,
                                            fontSize: R.dimen.sp16,
                                            fontWeight: FontWeight.w600),
                                      ),
                                    ),
                                    Container(
                                      margin:
                                          EdgeInsets.only(bottom: R.dimen.dp6),
                                      child: Text(
                                        item.label,
                                        style: TextStyle(
                                            color: item.labelColor,
                                            fontSize: item.labelSize),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                          ],
                        ),
                        Container(
                          margin: EdgeInsets.only(top: R.dimen.dp28),
                          child: Row(
                            children: [
                              Expanded(
                                child: Container(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Container(
                                        margin: EdgeInsets.only(
                                            left: (R.dimen.width -
                                                        R.dimen.dp13 * 2 * 2 -
                                                        R.dimen.dp56 -
                                                        R.dimen.dp24) *
                                                    .3 -
                                                R.dimen.dp2),
                                        child: Stack(
                                          alignment:
                                              AlignmentDirectional.center,
                                          children: [
                                            Image.asset(R.image.clockThumb),
                                            Container(
                                              padding: EdgeInsets.only(
                                                  bottom: R.dimen.dp4),
                                              child: Text(
                                                "3",
                                                style: TextStyle(
                                                    fontSize: R.dimen.sp16,
                                                    color: R.color.ffffffff,
                                                    fontWeight:
                                                        FontWeight.w600),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Stack(
                                        children: [
                                          Container(
                                            margin: EdgeInsets.only(
                                                left: R.dimen.dp13),
                                            height: R.dimen.dp8,
                                            width: R.dimen.width -
                                                R.dimen.dp13 * 2 * 2 -
                                                R.dimen.dp56 -
                                                R.dimen.dp24,
                                            decoration: BoxDecoration(
                                                color: R.color.ffe8e5e9,
                                                borderRadius:
                                                    BorderRadius.circular(
                                                        R.dimen.sp4)),
                                          ),
                                          Container(
                                            margin: EdgeInsets.only(
                                                left: R.dimen.dp13),
                                            height: R.dimen.dp8,
                                            width: (R.dimen.width -
                                                    R.dimen.dp13 * 2 * 2 -
                                                    R.dimen.dp56 -
                                                    R.dimen.dp24) *
                                                .3,
                                            decoration: BoxDecoration(
                                                gradient: LinearGradient(
                                                    colors: [
                                                      R.color.ff5ec899,
                                                      R.color.ff9ddd5d
                                                    ]),
                                                borderRadius:
                                                    BorderRadius.circular(
                                                        R.dimen.sp4)),
                                          ),
                                        ],
                                      ),
                                      Container(
                                        alignment: Alignment.centerRight,
                                        margin: EdgeInsets.only(
                                          top: R.dimen.dp12,
                                        ),
                                        child: Text(
                                          "距离完成还剩27天",
                                          style: TextStyle(
                                            fontSize: R.dimen.sp14,
                                            color: R.color.ff555555,
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Container(
                                  width: R.dimen.dp56,
                                  height: R.dimen.dp56,
                                  alignment: Alignment.center,
                                  // padding: EdgeInsets.symmetric(
                                  //     horizontal: R.dimen.dp13,
                                  //     vertical: R.dimen.dp24),
                                  decoration: BoxDecoration(
                                      image: DecorationImage(
                                          image:
                                              AssetImage(R.image.clockButton))),
                                  margin: EdgeInsets.only(
                                      left: R.dimen.dp24, right: R.dimen.dp13),
                                  child: Text(
                                    "签到",
                                    style: TextStyle(
                                        color: R.color.ffffffff,
                                        fontSize: R.dimen.sp15,
                                        fontWeight: FontWeight.w600),
                                  )),
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(
                              left: R.dimen.dp13, right: R.dimen.dp13),
                          child: Column(
                            children: [
                              Container(
                                  margin: EdgeInsets.only(
                                    top: R.dimen.dp22,
                                    bottom: R.dimen.dp16,
                                  ),
                                  child: Divider()),
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  GestureDetector(
                                    onTap: () => Get.toNamed(Get.currentRoute +
                                        AppRoutes.rewardRecord),
                                    child: Row(
                                      children: [
                                        Image.asset(R.image.clockRecord),
                                        Container(
                                            margin: EdgeInsets.only(
                                                left: R.dimen.dp6),
                                            child: Text("奖励记录")),
                                      ],
                                    ),
                                  ),
                                  GestureDetector(
                                    onTap: () => Get.toNamed(
                                        Get.currentRoute + AppRoutes.clockRule),
                                    child: Row(
                                      children: [
                                        Image.asset(R.image.clockRule),
                                        Container(
                                            margin: EdgeInsets.only(
                                                left: R.dimen.dp6),
                                            child: Text("规则说明"))
                                      ],
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    transform: Matrix4.translationValues(0, -R.dimen.dp20, 0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                            transform:
                                Matrix4.translationValues(0, -R.dimen.dp6, 0),
                            child: Image.asset(R.image.calenderHook)),
                        Container(
                            margin:
                                EdgeInsets.symmetric(horizontal: R.dimen.dp18),
                            child: Stack(
                              alignment: AlignmentDirectional.center,
                              children: [
                                Image.asset(R.image.calenderBanner),
                                Text(
                                  "不间断坚持签到，领取好礼！",
                                  style: TextStyle(
                                      fontSize: R.dimen.sp15,
                                      color: R.color.ffffffff,
                                      fontWeight: FontWeight.w600),
                                )
                              ],
                            )),
                        Container(
                            transform:
                                Matrix4.translationValues(0, -R.dimen.dp6, 0),
                            child: Image.asset(R.image.calenderHook))
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              margin: EdgeInsets.only(
                  top: R.dimen.dp12, left: R.dimen.dp13, right: R.dimen.dp13),
              decoration: BoxDecoration(
                  color: R.color.ffffffff,
                  borderRadius: BorderRadius.circular(R.dimen.sp10)),
              padding: EdgeInsets.symmetric(
                  horizontal: R.dimen.dp14, vertical: R.dimen.dp22),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "新人任务",
                    style: TextStyle(
                        fontSize: R.dimen.sp15,
                        fontWeight: FontWeight.w600,
                        color: R.color.ff333333),
                  ),
                  Column(
                    children: [
                      for (UserTaskEntity task in controller.newUserTasks)
                        Container(
                          decoration: BoxDecoration(
                              border: Border(
                                  bottom: BorderSide(
                                      width: .5,
                                      color:
                                          task == controller.newUserTasks.last
                                              ? R.color.transparent
                                              : R.color.ffdddddd))),
                          padding: EdgeInsets.symmetric(vertical: R.dimen.dp20),
                          child: Row(
                            children: [
                              Container(
                                  margin: EdgeInsets.only(right: R.dimen.dp15),
                                  child: Image.asset(task.icon)),
                              Expanded(
                                  child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    task.label,
                                    style: TextStyle(
                                        fontSize: R.dimen.sp14,
                                        color: R.color.ff111111),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top: R.dimen.dp3),
                                    child: Row(
                                      children: [
                                        Text(
                                          task.description,
                                          style: TextStyle(
                                              fontSize: R.dimen.sp12,
                                              color: R.color.ff999999),
                                        ),
                                        Visibility(
                                            visible: task.extra.isNotEmpty,
                                            child: Text(
                                              task.extra,
                                              style: TextStyle(
                                                  fontSize: R.dimen.sp12,
                                                  color: R.color.fffa5b34),
                                            ))
                                      ],
                                    ),
                                  )
                                ],
                              )),
                              Container(
                                alignment: Alignment.center,
                                constraints: BoxConstraints(
                                    minWidth: R.dimen.dp72,
                                    maxHeight: R.dimen.dp28),
                                padding: EdgeInsets.symmetric(
                                  horizontal: R.dimen.dp15,
                                ),
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.circular(R.dimen.sp16),
                                    color: ColorKit.fromHex(task.status.color)),
                                child: Text(
                                  task.status.name,
                                  style: TextStyle(
                                      fontSize: R.dimen.sp14,
                                      color: R.color.ffffffff),
                                ),
                              )
                            ],
                          ),
                        )
                    ],
                  )
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              margin: EdgeInsets.only(
                  top: R.dimen.dp12,
                  left: R.dimen.dp13,
                  right: R.dimen.dp13,
                  bottom: R.dimen.dp12),
              decoration: BoxDecoration(
                  color: R.color.ffffffff,
                  borderRadius: BorderRadius.circular(R.dimen.sp10)),
              padding: EdgeInsets.symmetric(
                  horizontal: R.dimen.dp14, vertical: R.dimen.dp22),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "每日任务",
                    style: TextStyle(
                        fontSize: R.dimen.sp15,
                        fontWeight: FontWeight.w600,
                        color: R.color.ff333333),
                  ),
                  Column(
                    children: [
                      for (UserTaskEntity task in controller.dailyTasks)
                        Container(
                          decoration: BoxDecoration(
                              border: Border(
                                  bottom: BorderSide(
                                      width: .5,
                                      color: task == controller.dailyTasks.last
                                          ? R.color.transparent
                                          : R.color.ffdddddd))),
                          padding: EdgeInsets.symmetric(vertical: R.dimen.dp20),
                          child: Row(
                            children: [
                              Container(
                                  margin: EdgeInsets.only(right: R.dimen.dp15),
                                  child: Image.asset(task.icon)),
                              Expanded(
                                  child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    task.label,
                                    style: TextStyle(
                                        fontSize: R.dimen.sp14,
                                        color: R.color.ff111111),
                                  ),
                                  Container(
                                      margin: EdgeInsets.only(top: R.dimen.dp3),
                                      child: Text.rich(TextSpan(
                                          text: "${task.description}",
                                          style: TextStyle(
                                              fontSize: R.dimen.sp12,
                                              color: R.color.ff999999),
                                          children: [
                                            TextSpan(
                                              text: "${task.extra}",
                                              style: TextStyle(
                                                  fontSize: R.dimen.sp12,
                                                  color: R.color.fffa5b34),
                                            )
                                          ])))
                                ],
                              )),
                              Container(
                                alignment: Alignment.center,
                                constraints: BoxConstraints(
                                    minWidth: R.dimen.dp72,
                                    maxHeight: R.dimen.dp28),
                                padding: EdgeInsets.symmetric(
                                  horizontal: R.dimen.dp15,
                                ),
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.circular(R.dimen.sp16),
                                    color: ColorKit.fromHex(task.status.color)),
                                child: Text(
                                  task.status.name,
                                  style: TextStyle(
                                      fontSize: R.dimen.sp14,
                                      color: R.color.ffffffff),
                                ),
                              )
                            ],
                          ),
                        )
                    ],
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
